<%--
  Created by IntelliJ IDEA.
  User: duanzx
  Date: 2021/2/22
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico" />
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        * {margin: 0;padding: 0}
        a {cursor: pointer;text-decoration: none;}
        .top {width: 100%;height: 30px;padding-left: 60px;line-height: 30px;overflow: hidden;background-color:#2b2c31;}
        .show {color:rgba(255, 255, 255, 0.7) ;}
        .index {color:rgba(255, 255, 255, 0.7) ;}
        .primary {color: #ffffff;}
        .index:hover {color: #ffffff;}
        .community-content {padding: 110px 0 40px;width: 1200px;margin: 0 auto;position: relative;min-height: 100vh;}
        .community-content:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .community-content .tabs-container {min-height: 603px;margin-top: 30px;}
        .tabs-container .left-menu-tabs-buttons {float: left;width: 160px;height: auto;background: #282931;overflow: hidden;border-radius: 5px 5px 5px 5px;}
        .left-menu-tabs-buttons .first-title {font-size: 18px;color: #ffffff;margin: 0 20px 5px 20px;padding-bottom: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
        .left-menu-tabs-buttons .tabs-button {padding: 0;float: none;border-top: none;height: 42px;}
        .tabs-buttons .tabs-button {line-height: 54px;border-width: 4px 0 0;border-style: solid;border-color: transparent;font-size: 16px;}
        .tabs-button a {font-size: 16px;color: rgba(255, 255, 255, 0.6);display: block;line-height: 42px;text-align: center;}
        .tabs-button .active {color: #ff6900;background: rgba(255, 255, 255, 0.05)!important;}
        .active {color: #ff6900;background: rgba(255, 255, 255, 0.05);}
        .user-center {margin: 0 0 0 180px;background:transparent }
        .user-center .basic-info {font-size: 12px;background-color: #282931;padding: 50px 110px 40px 100px}
        .form-block {margin-bottom: 15px;height: 30px;line-height: 30px;}
        .label-name {float: left;width: 100px;color: rgba(255, 255, 255, 0.7);font-size: 16px;height: 30px;line-height: 30px;}
        .form-block .form-control {float: left;font-size: 14px;margin-right: 20px;margin-left: 40px;color: rgba(255, 255, 255, 0.7);}
        .form-block input {width: 200px;height: 30px;line-height: 30px;padding: 0 10px;color: #b9c0ef;background: #212329;border-radius: 2px 2px 2px 2px;}
        .form-block:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .btn-wrap { margin-top: 190px}
        .btn-wrap:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .btn-wrap .submit {border: none;text-align: center;box-sizing: border-box;background: #ff6900;color: #ffffff;cursor: pointer;outline: none;border-radius: 2px 2px 2px 2px;font-size: 18px;padding: 7px 25px;float: right;}
    </style>
</head>
<body>

<!-- 公共头部/首页 -->
<%@ include file="../common/index-header.jsp" %>

<div class="top">
    <span class="show">您的位置：</span>
    <a href="/" class="index">首页 》</a>
    <a href="" class="primary">个人中心</a>
</div>

<div class="community-content">
    <div class="tabs-container">
        <div class="tabs-buttons left-menu-tabs-buttons">
            <div class="tabs-button first-title">订单中心</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=gamefactory" >我的订单</a>
            </div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=gamefactory" >我的游戏</a>
            </div>
            <div class="tabs-button first-title">我的财产</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=wallet" >我的钱包</a>
            </div>
            <div class="tabs-button first-title">我的账户</div>
            <div class="tabs-button">
                <a href="/setting/info.jsp"  >基本信息</a>
            </div>
            <div class="tabs-button">
                <a href="/setting/security.jsp " class="active">账号安全</a>
            </div>
            <div class="tabs-button">
                <a href="/setting/dream.jsp" >愿望单</a>
            </div>
        </div>
        <form id="updatePasswordForm">
            <div class="user-center">
                <div class="basic-info">
                    <div class="form-block">
                        <div class="label-name">新密码:</div>
                        <input type="possword" name="password" id="password" class="form-control" placeholder="请输入新密码">
                    </div>
                    <div class="form-block">
                        <div class="label-name">确认密码:</div>
                        <input type="posssword" name="checkPassword" id="checkPassword" class="form-control" placeholder="请再次输入确认密码">
                    </div>
                    <div class="btn-wrap">
                        <button class="submit " id="ipdatePassword">保存全部修改</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 公共底部 -->
<%@ include file="../common/footer.jsp" %>


<script src="${ bp }/static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">
    $(".submit").click(function(){

        let password = $("input[name='password']").val();

        let checkPassword = $("input[name='checkPassword']").val();
        if(password != checkPassword){
            alert("两次密码不一致!");
            $("input[name='password']").val("");
            $("input[name='checkPassword']").val("");
            return false;
        }
    });

    // 监听表单提交
    // 调用ajax提交修改数据
    $("#ipdatePassword").click(function (){
        $.ajax({
            url: '${ bp }/user?method=updatePassword',
            type: 'post',
            data: {
                password:$("#password").val()
            },
            dataType: 'json',
            success: (result) => {
                if (result.code === 0) {
                    layer.msg('修改成功', {
                        time: 1000,
                        icon: 1
                    }, function () {
                        window.location = '${ bp }/index.jsp';
                    });
                } else {
                    layer.msg(result.msg, {
                        time: 2000,
                        icon: 2
                    });
                }
            },
            error: () => {
                console.log('请求失败！');
            }
        });
    });

</script>
</body>
</html>
